<template>
	<view class="page">
		<view class="content_top">
			<view class="back" @click="toback"> <uni-icons type="back" size="30" color="#fff"></uni-icons> </view>
			<image class="logo" :src="`${store.state.baseImgUrl}static/indexpage/dgwb.png`"></image>
		</view>
		<view class="content2">
			<view class="datalist">
				<view class="itembox" v-for="item in datalist">
					<view class="imgbox">
						<image class="img" :src="item.img"></image>
					</view>
					<view class="infobox">
						<view class="titlecss">{{item.lable}}</view>
						<view class="infocss">
							{{item.info}}
						</view>
						<view class="tomore">
							了解更多
						</view>
					</view>
				</view>
			</view>
			<view class="nomore">
				<image class="nomore_img" :src="`${store.state.baseImgUrl}static/main/nomore.png`" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
import { useStore } from 'vuex';
	
	const store = useStore()

const datalist=ref([
	{
		lable:"长明灯",
		datatime:"2025-04-24",
		look:"122",
		info:"长明不灭   普照十方 ",
		img:"https://t12.baidu.com/it/u=805240057,266238231&fm=30&app=106&f=JPEG?w=312&h=208&s=E7004AAF7A70389685BC189B0300D013"
	},
	{
		lable:"御制广仁寺碑",
		datatime:"2025-04-24",
		look:"122",
		info:"康熙皇帝亲书《御制广仁寺碑》及碑文真 迹",
		img:"https://t12.baidu.com/it/u=1564240150,266235912&fm=30&app=106&f=JPEG?w=312&h=208&s=66F07AD90C43F6C610B8BC6303007074"
	},
	{
		lable:"明版《大藏经》",
		datatime:"2025-04-24",
		look:"122",
		info:"康熙四十九年修订明版《大藏经》",
		img:"https://t11.baidu.com/it/u=310901544,266123737&fm=30&app=106&f=JPEG?w=312&h=208&s=94107BDFC2423BF539B4D1090300E041"
	},
	{
		lable:"汉白玉莲花缸",
		datatime:"2025-04-24",
		look:"122",
		info:"清乾隆皇帝御赐汉白玉莲花打",
		img:"https://t12.baidu.com/it/u=805240057,266238231&fm=30&app=106&f=JPEG?w=312&h=208&s=E7004AAF7A70389685BC189B0300D013"
	}
])
const avtivenum=ref(0)
const changenameed=(item,index)=>{
	console.log(index)
	avtivenum.value=index
}
const toback=()=>{
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #5e0e03;
		.content_top{
			position: relative;
			.back{
				position: absolute;
				top: 100rpx;
				left: 50rpx;
				font-size: 30rpx;
				color: #fff;
				z-index: 101;
				width: 50rpx;
				height: 50rpx;
			}
			.logo{
				height: 470rpx;
				width: 100%;
			}
			}
			
		.content1{
			// position: relative;
			height: 80rpx;
			width: 90%;
			margin: 0 5%;
			// background:url('/static/main/zxsdh.png');
			// background-repeat: no-repeat;
			// background-size: cover;
			.titlelist_img{
				position: absolute;
				height: 80rpx;
				width: 100%;
				z-index: 99;
			}
			.position_re{
				position: relative;
				height: 80rpx;
				z-index: 101;
				.titlelistcss{
					// position: absolute;
					display: flex;
					padding: 0 10%;
					justify-content: space-between;
					top: 0;
					z-index: 101;
					text{
						line-height: 40rpx;
						color: #ffdf20;
						display: inline-block;
						border-right: 1px solid #ffdf20;
						text-align: center;
						margin: 20rpx 0;
						width: 20%;
						cursor: pointer;
					}
					text:last-child{
						border-right:none;
					}
					.active{
						color: #fff;
					}
				}
			}
			
		}
		.content2{
			position: relative;
			padding:0 5%;
			padding-bottom: 30rpx;
			top: -25rpx;
			.datalist{
				.itembox{
					display: flex;
					flex-wrap: nowrap;
					background:url('https://buma-1307931616.cos.ap-guangzhou.myqcloud.com/xian/static/main/bigzxbox.png');
					background-repeat: no-repeat;
					background-size: contain;
					// width: 90%;
					height: 245rpx;
					margin-top: 20rpx;
					.imgbox{
						width: 200rpx;
						height: 205rpx;
						padding: 10rpx;
						
						
					}
					.img{
						width: 200rpx;
						height: 205rpx;
						padding: 10rpx;
					}
					.infobox{
						position: relative;
						width: 400rpx;
						height: 225rpx;
						color: #fff;
						font-size: 24rpx;
						padding: 10rpx;
						padding-left: 25rpx;
						z-index: 102;
						.titlecss{
							font-size: 30rpx;
							display: block;
							border-bottom: 1px solid #fff;
							padding: 15rpx 0;
						}
						.infocss{
							width: 400rpx;
							padding: 15rpx 0;
							color: #f3f3f3;
							font-size: 22rpx;
						}
						.tomore{
							position: absolute;
							color:#ffd501;
							bottom:20rpx;
							right: 5rpx;
							
						}
					}
					
				}
			}
			.nomore{
				position: absolute;
				bottom:-50rpx ;
				text-align: center;
				width: 90%;
			 
			}
		}
	}

	
</style>